@use 'sass:map';

// 设置CSS变量值
@mixin set-css-var-value($name, $value) {
  --#{$name}: #{$value};
}

// 设置组件CSS变量
@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    @if $attribute == '' {
      --ba-#{$name}: #{$value};
    } @else {
      --ba-#{$name}-#{$attribute}: #{$value};
    }
  }
}

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (max-width: 576px) {
      @content;
    }
  } @else if $breakpoint == 'md' {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == 'lg' {
    @media (max-width: 992px) {
      @content;
    }
  } @else if $breakpoint == 'xl' {
    @media (max-width: 1200px) {
      @content;
    }
  } @else if $breakpoint == 'xxl' {
    @media (max-width: 1400px) {
      @content;
    }
  }
}

// 超出显示省略号
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本超出省略号
@mixin multi-ellipsis($line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

// flex布局
@mixin flex($justify: center, $align: center, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

// 滚动条美化
@mixin scrollbar($width: 6px, $thumb-color: rgba(144, 147, 153, 0.3), $track-color: transparent) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: $width / 2;
  }
  
  &::-webkit-scrollbar-track {
    background-color: $track-color;
  }
}
